<template>
    <el-container>
      <!-- 顶部导航栏 - 优化版 -->
      <el-header class="main-header">
        <div class="header-content">
          <div class="left-section">
            <h1 class="logo-text">朋辈心理互助平台后台</h1>

          </div>
          <div class="user-info">
            <el-dropdown trigger="click">
              <div class="user-wrapper">
                <el-avatar
                  :size="36"
                  :src="proxy.globalInfo.imageUrl+userInfo.avatar"
                  class="user-avatar"
                ></el-avatar>
                <span class="user-name">{{ userInfo.nickName }}</span>
                <el-icon class="arrow-down"><arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown">
                  <el-dropdown-item @click="goToProfile">
                    <el-icon><user /></el-icon> 个人中心
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <el-icon><switch-button /></el-icon> 退出登录
                  </el-dropdown-item>

                  <el-dropdown-item divided @click="goToHomePage">
                    <el-icon><ArrowLeft /></el-icon> 返回主页
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主体内容 -->
      <el-container>
        <!-- 左侧菜单栏 -->
        <el-aside width="220px" class="left-aside">
          <el-menu
          :default-active="activeMenu"
          :default-openeds="defaultOpeneds"
          router
          class="el-menu-vertical"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @select="handleSelect"
          >

             <!-- 首页 -->
             <el-sub-menu index="data-dashboard" v-if="userInfo.admin||userInfo.roleType==1">
              <template #title>
                <el-icon><DataAnalysis /></el-icon>
                <span>首页</span>
              </template>
              <el-menu-item index="/psychology/backend/home">数据统计</el-menu-item>
            </el-sub-menu>


            <!-- 工作平台 -->
            <el-sub-menu index="work-platform" v-if="userInfo.roleType==2">
              <template #title>
                <el-icon><calendar /></el-icon>
                <span>工作平台</span>
              </template>
              <el-menu-item index="/psychology/backend/appointment">预约管理</el-menu-item>
            </el-sub-menu>

            <!-- 用户管理 -->
            <el-sub-menu index="user-management" v-if="userInfo.admin||userInfo.roleType==1">
              <template #title>
                <el-icon><user /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/psychology/backend/user">普通用户</el-menu-item>
              <el-menu-item index="/psychology/backend/councelor">心理咨询师</el-menu-item>
            </el-sub-menu>

            <!-- 网站管理 -->
            <el-sub-menu index="website-management" v-if="userInfo.admin||userInfo.roleType==1">
              <template #title>
                <el-icon><monitor /></el-icon>
                <span>网站管理</span>
              </template>
              <el-menu-item index="/psychology/backend/carousel">轮播图管理</el-menu-item>

            </el-sub-menu>

            <!-- 内容管理 -->
            <el-sub-menu index="content-management" v-if="userInfo.admin||userInfo.roleType==1">
              <template #title>
                <el-icon><folder-opened /></el-icon>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/psychology/backend/share">分享管理</el-menu-item>
              <el-menu-item index="/psychology/backend/category">类型管理</el-menu-item>
            </el-sub-menu>

            <!-- 违规信息管理 -->
            <el-menu-item index="/psychology/backend/violation" v-if="userInfo.admin||userInfo.roleType==1">
              <el-icon><warning /></el-icon>
              <span>违规信息管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 右侧内容区 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>

  <script setup>

  import { ref,watch, reactive, onMounted,getCurrentInstance, nextTick } from "vue"
  const { proxy } = getCurrentInstance();
  import { useRoute, useRouter } from 'vue-router'
  import { ElContainer, ElHeader, ElAside, ElMain, ElMenu, ElMenuItem, ElAvatar } from 'element-plus';
  import {
    HomeFilled,
    User,
    Setting,
    Calendar,
    Monitor,
    FolderOpened,
    Warning,
    DataAnalysis,
    ArrowDown,
    SwitchButton,
    ArrowLeft
  } from '@element-plus/icons-vue';

  const route = useRoute()
  const router = useRouter();

  const userInfo = ref(proxy.VueCookies.get("userInfo")||null)
    // 组件加载时跳转到首页
    onMounted(() => {
      router.push('/psychology/backend/home');
    });

// 默认展开所有菜单
const defaultOpeneds = ref([
  'data-dashboard',
  'work-platform',
  'user-management',
  'website-management',
  'content-management'
])
  // 当前激活菜单（根据路由变化）
  const activeMenu = ref(route.path)

  // 监听路由变化更新激活菜单
  watch(() => route.path, (newPath) => {
    activeMenu.value = newPath
  })


  function handleSelect(index) {
    console.log('Selected menu index:', index);
    // 这里可以根据 index 进行路由跳转或其他操作
  }

  // 跳转首页
  const goToHomePage = () => {
    router.push('/psychology/home');
  };

  // 跳转个人中心
  const goToProfile = () => {
    router.push('/psychology/user');
  };

  // 退出登录
  const handleLogout = () => {
    // 这里添加退出登录逻辑
    localStorage.removeItem('token');
    router.push('/login');
  };
  </script>

  <style scoped lang="scss">
  /* 修改布局容器高度 */
  .el-container {
    min-height: 100vh;
  }

  /* 调整左侧菜单栏样式 */
  .left-aside {
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgb(48, 65, 86);

  }

  /* 修正header和main的位置 */
  .el-header {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 1001;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
  }

  .el-main {
    margin-left: 220px;
    padding-top: 80px;
    min-height: calc(100vh - 80px);
  }

  /* 菜单栏高度补偿header */
  .el-menu-vertical {
    padding-top: 60px; /* 与header高度一致 */
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-section {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .logo-text {
    color: black;

    font-size: 24px;
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .home-link {
    font-size: 16px;
    color: black;
    padding: 8px 15px;
    transition: all 0.3s;

    &:hover {
      color: #409EFF !important;
      background: rgba(255,255,255,0.1);
      border-radius: 4px;
    }
  }

  .user-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background: rgba(255,255,255,0.1);
    }
  }

  .user-avatar {
    background-color: #409EFF;
  }

  .user-name {
   color: black;;
    margin: 0 10px;
    font-size: 15px;
  }

  .arrow-down {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
  }

  /* 下拉菜单样式 */
  .user-dropdown {
    background: #304156;
    border: 1px solid rgba(255,255,255,0.1);

    :deep(.el-dropdown-menu__item) {
      color: #bfcbd9 !important;
      font-size: 14px;

      &:hover, &:focus {
        background: rgba(255,255,255,0.05);
        color: #bfcbd9 !important; /* 保持原色 */
      }
    }

    .el-icon {
      margin-right: 8px;
      color: #bfcbd9;
    }
  }

  /* 左侧菜单栏滚动条样式 */
  .left-aside::-webkit-scrollbar {
    width: 6px;
  }

  .left-aside::-webkit-scrollbar-thumb {
    background-color: #606266;
    border-radius: 3px;
  }
  </style>